<template>
    <div id="app">
        <!--应用程序栏-->
        <v-app id="inspire">
            <div>
                <v-app-bar dark color="#FF5252">
                    <v-list-item-title center style="font-size: 20px; text-align: center"
                    >账户登录
                    </v-list-item-title
                    >
                    <v-btn
                            elevation="0"
                            absoulute
                            small
                            dark
                            color="#FF5252"
                            router-link
                            :to="{ path: 'register' }"
                            style="position:absolute;z-index:100;right:10px"
                    >注册
                    </v-btn
                    >
                </v-app-bar>
            </div>
            <v-row style="width: 100%;margin: 0;max-height: 300px;">
                <v-img align="center" justify="center"
                       src="../../../static/index/ba_004.jpg"
                       lazy-src="https://picsum.photos/id/11/10/6"
                       aspect-ratio="1"
                       class="grey lighten-2"
                       max-width="100%"
                       max-height="260px"
                ></v-img>
            </v-row>
            <!--用户填写登录信息-->
            <v-card-text style="padding: 10px 40px 0">
                <v-text-field
                        v-model="phone"
                        color="#FF5252"
                        label="手机号"
                        validate-on-blur
                        :rules="[rules.requiredUser, rules.phone]"
                        placeholder=""
                ></v-text-field>
                <v-text-field
                        v-model="password"
                        color="#FF5252"
                        :rules="[rules.requiredPassword, rules.counterPassword]"
                        :type="show ? 'text' : 'password'"
                        label="密码"
                        validate-on-blur
                        placeholder=""
                ></v-text-field>
            </v-card-text>
            <v-layout style="padding-top: 30px ;height: 82px">

                <div class="loginButton">
                    <!--立即登录按钮-->
                    <v-btn
                            block
                            x-large
                            dark
                            color="#FF5252"
                            @click="login"
                            style="font-size: 18px"
                    >立即登录
                    </v-btn>
                </div>
            </v-layout>
            <v-card-text style="text-align: center" @click="goUpdatePwd()">
                忘记密码？
            </v-card-text>
            <!--错误信息提示-->
            <v-snackbar v-model="snackbar" bottom :timeout="timeout">
                {{ message }}
            </v-snackbar>
            <v-overlay :value="overlay">
                <v-progress-circular indeterminate size="64"></v-progress-circular>
            </v-overlay>
        </v-app>
    </div>
</template>

<script>
    // import {Base64} from "js-base64";
    import axios from "axios";

    export default {
        name: "Login",
        data() {
            return {
                snackbar: false,
                timeout: 2000,
                message: "",
                phone: "",
                token: "",
                password: "",
                show: false,
                overlay: false,
                rules: {
                    requiredUser: value => !!value || "请输入手机账号",
                    requiredPassword: value => !!value || "请输入密码",
                    counterPassword: value => value.length >= 6 || "至少输入6位密码",
                    requiredImageCheck: value => !!value || "请输入图片验证码",
                    imageCheck: value => {
                        const pattern = /^[a-zA-Z0-9]{4}$/;
                        return pattern.test(value) || "图片验证码格式错误";
                    },
                    phone: value => {
                        const pattern = /^1([345789][0-9]|4[579]|66|7[0135678]|9[89])[0-9]{8}$/;
                        return pattern.test(value) || "手机账号格式错误";
                    }
                }
            };
        },
        methods: {
            //登录成功进入主界面
            goMine() {
                this.$router.replace({
                    path: "/main/mine"
                });
            },
           // 点击忘记密码跳转到忘记密码的页面
            goUpdatePwd() {
              this.$router.replace({
                path: "/changePwd"
              });
            },
            //向后端发送账号密码进行检测
            login() {
                if (this.phone === "" || this.password === "") {
                    this.snackbar = true;
                    this.message = "请把参数补充完整！";
                } else if (this.password.length < 6) {
                    this.snackbar = true;
                    this.message = "密码长度过低！";
                } else {
                    let _this = this;
                    _this.overlay = true;
                    axios
                        .post("/api/v1.0/login", {
                            mobile: _this.phone,
                            password: _this.password,
                        })
                        .then(function (response) {
                            _this.overlay = false;
                            _this.snackbar = true;
                            _this.message = response.data.errmsg;
                            if (response.data.errno === '0') {
                                // 填坑：第一个需要时方法的地址
                                setTimeout(_this.goMine, 2);
                            }
                        })
                        .catch(function () {
                            _this.overlay = false;
                            _this.snackbar = true;
                            _this.message = "连接服务器失败！";
                        });
                }
            }
        },
    }
</script>
<style scoped>

    .loginButton {
        margin: 0 auto;
        width: 100%;
        height: 52px;
        padding-left: 30px;
        padding-right: 30px;
    }

    .checkImage {
        float: right;
        padding-top: 0px;
    }

</style>
